<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h3 class="page-title">借款信息详情</h3>
    </div>

    <!-- 借款信息卡片 -->
    <div class="info-card">
      <div class="card-header">
        <i class="el-icon-document"></i>
        <span>借款信息</span>
      </div>
      <div class="card-body">
        <div class="grid-container">
          <div class="grid-item">
            <div class="item-label">借款金额</div>
            <div class="item-value">{{ borrowInfoDetail.borrowInfo.amount }}元</div>
          </div>
          <div class="grid-item">
            <div class="item-label">借款期限</div>
            <div class="item-value">{{ borrowInfoDetail.borrowInfo.period }}个月</div>
          </div>
          <div class="grid-item">
            <div class="item-label">年化利率</div>
            <div class="item-value">{{ borrowInfoDetail.borrowInfo.borrowYearRate * 100 }}%</div>
          </div>
          <div class="grid-item">
            <div class="item-label">还款方式</div>
            <div class="item-value">{{ borrowInfoDetail.borrowInfo.param.returnMethod }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">资金用途</div>
            <div class="item-value">{{ borrowInfoDetail.borrowInfo.param.moneyUse }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">状态</div>
            <div class="item-value status-badge" :class="getStatusClass(borrowInfoDetail.borrowInfo.param.status)">{{ borrowInfoDetail.borrowInfo.param.status }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">创建时间</div>
            <div class="item-value">{{ borrowInfoDetail.borrowInfo.createTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 借款人信息卡片 -->
    <div class="info-card">
      <div class="card-header">
        <i class="el-icon-user"></i>
        <span>借款人信息</span>
      </div>
      <div class="card-body">
        <div class="grid-container">
          <div class="grid-item">
            <div class="item-label">借款人</div>
            <div class="item-value font-bold">{{ borrowInfoDetail.borrower.name }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">手机</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.mobile }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">身份证</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.idCard }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">性别</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.sex }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">年龄</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.age }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">是否结婚</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.marry }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">学历</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.education }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">行业</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.industry }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">月收入</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.income }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">还款来源</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.returnSource }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">创建时间</div>
            <div class="item-value">{{ borrowInfoDetail.borrower.createTime }}</div>
          </div>
          <div class="grid-item">
            <div class="item-label">状态</div>
            <div class="item-value status-badge" :class="getStatusClass(borrowInfoDetail.borrower.status)">{{ borrowInfoDetail.borrower.status }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 返回按钮 -->
    <div class="action-container">
      <el-button type="primary" @click="back">
        <i class="el-icon-back"></i> 返回
      </el-button>
    </div>
  </div>
</template>

<script>
import borrowInfoApi from '@/api/core/borrow-info'

export default {
  data() {
    return {
      borrowInfoDetail: {
        borrowInfo: {
          param: {}
        },
        borrower: {}
      }
    }
  },

  created() {
    if (this.$route.params.id) {
      this.fetchDataById()
    }
  },

  methods: {
    fetchDataById() {
      borrowInfoApi.show(this.$route.params.id).then(response => {
        this.borrowInfoDetail = response.data.borrowInfoDetail
      }).catch(error => {
        console.error('获取借款信息失败', error)
        this.$message.error('获取借款信息失败，请稍后重试')
      })
    },

    back() {
      this.$router.push('/core/borrower/info-list')
    },

    // 根据状态返回对应的样式类
    getStatusClass(status) {
      const statusMap = {
        '正常': 'badge-success',
        '已逾期': 'badge-danger',
        '已结清': 'badge-info',
        '审核中': 'badge-warning',
        '已拒绝': 'badge-secondary'
      }
      return statusMap[status] || 'badge-default'
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.app-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  color: #303133;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

/* 信息卡片样式 */
.info-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border-radius: 8px 8px 0 0;
}

.card-header i {
  margin-right: 10px;
  color: #409eff;
  font-size: 18px;
}

.card-header span {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.card-body {
  padding: 20px;
}

/* 网格布局样式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.grid-item {
  padding: 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.grid-item:hover {
  background-color: #fafafa;
}

.item-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.item-value {
  font-size: 16px;
  color: #303133;
}

.font-bold {
  font-weight: bold;
}

/* 状态徽章样式 */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}

.badge-success {
  color: #10b981;
  background-color: #ecfdf5;
}

.badge-danger {
  color: #ef4444;
  background-color: #fee2e2;
}

.badge-info {
  color: #3b82f6;
  background-color: #dbeafe;
}

.badge-warning {
  color: #f59e0b;
  background-color: #fffbeb;
}

.badge-secondary {
  color: #64748b;
  background-color: #f1f5f9;
}

.badge-default {
  color: #606266;
  background-color: #f4f4f5;
}

/* 操作按钮样式 */
.action-container {
  text-align: center;
  margin-top: 30px;
}

.action-container .el-button {
  padding: 10px 30px;
  font-size: 16px;
}
</style>
